<template>
  <div class="preview">
    <el-card class="box-card" shadow="hover"
             style="background-color: #e8e0e0;line-height:60px;;width: 100%;text-align:center;height:60px;margin-bottom: 20px;;left:10px;top:10px;position: relative;right: 10px">
      <h2 style="font-family: 黑体;font-weight: bold;position: relative;top: -15px">碳排放数据预览</h2>
    </el-card>


    <el-row :gutter="15">
      <el-col :span="11">
        <div style="height: 120px;margin-left: 10px">
          <el-card class="box-card" style="width: 325px;float: left;background-color: #c8cbd2" shadow="hover">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold">累计碳排放</span>
            </div>
            <div class="text item" style="font-family: 'Yu Gothic UI';height: 16px ">
              <el-tag>
                <el-link :underline="false" style="font-size: 25px">{{ totalCO2 }} tCO2</el-link>
              </el-tag>
            </div>
          </el-card>
          <el-card class="box-card" style="width: 325px;float: left;margin-left: 10px;background-color: #c8cbd2"
                   shadow="hover">
            <div slot="header" class="clearfix" style="font-weight: bold;">
              <span>碳排放量最大生产阶段</span>
            </div>
            <el-tag>
              <el-link :underline="false" class="text item"
                       style="font-family: 黑体;;font-size: 25px;padding-bottom: 8px">
                {{ highestCarbonEmission }}
              </el-link>
            </el-tag>
          </el-card>
          <el-card class="box-card" shadow="hover"
                   style="margin-left: 1px;margin-top: 10px;width: 660px;background-color: #d8eccf">
            <div ref="mychart" style=";width: 590px;height: 500px;" id="myDiv"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="right" style="width: 100%">
          <el-card class="box-card" shadow="hover" style="width: 100%;height:650px;background-color: #f5e4cc">
            <div slot="header" class="clearfix">
              <span style="font-weight: bold">各阶段碳排放总量</span>
            </div>
            <div style="width: 100%;height: 690px;margin-left: -50px;margin-top: -50px" class="barchart"
                 ref="barchart"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import {getProportionStage, getStageTotalCO2, getTotalCO2} from "@/api/carbon-manage/data";

require('echarts/theme/macarons')

var barData = []

var data = [
  {
    value: 0.77,
    name: '燃料燃烧',
    /*itemStyle: {
      normal: {
        color: '#c23531'
      }
    }*/
  },
  {
    value: 0.05,
    name: '工业生产',
    /*itemStyle: {
      normal: {
        color: '#61a0a8'
      }
    }*/
  },
  {
    value: 0.17,
    name: '电力热力',
    /*itemStyle: {
      normal: {
        color: '#d48265'
      }
    }*/
  },
  {
    value: 0.01,
    name: '固碳产品',
    /*itemStyle: {
      normal: {
        color: '#91c7ae'
      }
    }*/
  }
]

export default {
  name: 'index',
  data() {
    return {
      totalCO2: 0,
      highestCarbonEmission: ''
    }
  },
  mounted() {
    this.drawLine()
    this.drawBarLine()
    this.queryTotalCO2()
    this.getVaryStageTotalCO2()

    getProportionStage().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        var val = res.data[i].initNumber * 100
        data[i].value = Math.floor(val * 100) / 100
      }
      this.drawLine()
    })
  },
  methods: {
    queryTotalCO2() {
      getTotalCO2().then(res => {
        this.totalCO2 = res.data
      })
    },
    getVaryStageTotalCO2() {
      getStageTotalCO2().then(res => {
        let map = res.data;
        barData[0] = map['燃料燃烧'];
        barData[1] = map['工业生产'];
        barData[2] = map['电力热力'];
        barData[3] = map['固碳产品'];
        this.highestCarbonEmission = Math.max(map['燃料燃烧'], map['工业生产'], map['电力热力'], map['固碳产品'])
        if (this.highestCarbonEmission === map['燃料燃烧']) {
          this.highestCarbonEmission = '燃料燃烧';
        } else if (this.highestCarbonEmission === map['工业生产']) {
          this.highestCarbonEmission = '工业生产';
        } else if (this.highestCarbonEmission === map['电力热力']) {
          this.highestCarbonEmission = '电力热力';
        } else if (this.highestCarbonEmission === map['固碳产品']) {
          this.highestCarbonEmission = '固碳产品';
        }
        this.drawBarLine();
      })
    },
    drawBarLine() {
      let myChart = echarts.init(this.$refs.barchart, 'light');
      let option = {
        xAxis: {
          type: 'category',
          data: ['燃料燃烧', '工业生产', '电力热力', '固碳产品']
        },
        yAxis: {
          type: 'value',
          max: 5000000  // 根据需要设置合适的最小间隔值
        },
        grid: {
          containLabel: true,
        },
        tooltip: {
          // show: true,
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            // type: 'line',
            z: 0,
            lineStyle: {
              width: 50,
              color: '#f9eed7'
            }
          },
          formatter: function (params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              relVal += '<br/>' + params[i].marker + params[i].value + '(tCO\u2082)'
            }
            return relVal
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            data: barData,
            type: 'bar',
            barWidth: 50,
            /* markPoint: {
               data: [
                 {
                   name: "最大值",
                   type: "max",
                 },
                 {
                   name: "最小值",
                   type: "min",
                 }
               ],
             },*/
            label: {
              show: true,
              position: 'top',
              color: 'black'
            },
            itemStyle: {
              barBorderRadius: [25, 25, 0, 0],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: '#5052EE'
                  },
                  {
                    offset: 1,
                    color: '#AB6EE5'
                  }
                ])
            }
            /*itemStyle: {
              normal: {
                color: function (params) {
                  let colorList = [
                    '#c12e34',
                    '#e6b600',
                    '#0098d9',
                    '#2b821d',
                  ];
                  return colorList[params.dataIndex];
                },
              }
            }*/
          }
        ]
      };
      myChart.setOption(option);
    },
    drawLine() {
      let myChart = echarts.init(this.$refs.mychart, 'light');

      let option = {
        legend: {
          show: true,
          icon: 'circle',
          right: 'right'
        },
        title: {
          text: '排放类别分析',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          formatter: (item) => {
            let txtCon = `${item.data.name}</br><b>${item.data.value}%<b>`;
            return txtCon;
          }
        },
        series: [
          {
            name: '碳排放类别',
            type: 'pie',
            radius: ['40%', '70%'],//饼图的半径。数组的第一项是内半径，第二项是外半径。
            /*label: {//饼图图形上的文本标签
              show: true,
              position: "outside",//outside饼图扇区外侧inside饼图扇区内部center在饼图中心位置
            },*/
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#d8eccf',
              borderWidth: 2
            },
            labelLine: {//标签的视觉引导线配置
              show: true
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 30,
                fontWeight: 'bold'
              }
            },
            data
          }
        ]
      }

      myChart.setOption(option);
    },

  }
}
</script>

<style scoped>
.preview {
}

#myDiv {
  width: 100%;
  height: 400px;
}

.barchart {
  height: 600px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  border-radius: 10px;
}

</style>
